<template>
  <ul class="start-box">
    <li
      v-for="d in 5"
      :key="d"
      :class="{ 'active': d <= star, 'disabled': disabled }"
      @click="$emit('change', d)"
    ></li>
  </ul>
</template>

<script>
// 传值：数字/评分  1-5整数
// 不能直接改 props
// 发送数据，将数据传给父组件：点击哪颗星星，就将对应的数字发送出去
export default {
  // props: ["star"],
  props: {
    // 自定义属性的类型  Number, String, Boolean, Array, Object, Function
    // star: Number
    star: {
      // type 指定类型
      type: Number,
      // default 指定默认值
      // default: 2,
      // required 指定为必填
      required: true
    },
    disabled: {
      // 布尔类型，可以不传，默认值是 false
      type: Boolean,
      default: false
    }
  }
};
</script>

<style lang="sass">
.start-box
  display: inline-flex
  width: 150px
  height: 30px
  li
    flex: 1
      // Vue 项目中路径使用 @ 表示src目录, 如果在样式中使用 @，前面需要加 ~
      // @ 是 webpack 中定义的别名
    background: url(~@/assets/img/heart-line.png) no-repeat
    background-size: cover
    &.active
      background-image: url(~@/assets/img/heart-fill.png)
    &.disabled
      opacity: .5
      cursor: not-allowed
</style>
